<template>
	<div id="register">
		<img src="../../static/img/login-agent.png"/>
		<div class="login_form">
			<h3>商家注册</h3>
			<div class="input">
				<img src="../../static/img/login-1.png"/>
				<input type="text" placeholder="请输入手机号" v-model="phone" />
			</div>
			<div class="validate">
				<div>
					<img src="../../static/img/login-3.png"/>
					<input type="text" v-model="code" placeholder="请输入验证码" />
				</div>
				<input v-show="verificationShow" @click="countDown" type="button" value="获取验证码" />
				<input v-show="!verificationShow" type="button" v-model="getVerification" />
			</div>
			<div class="input"v-show="inviteCheck">
				<img src="../../static/img/login-4.png" />
				<input type="text" v-model="invite" placeholder="请输入邀请码，没有可不填" />
			</div>
			<div class="input">
				<img src="../../static/img/login-5.png"/>
				<input type="password" placeholder="请输入密码" v-model="password" />
			</div>
			<div class="input">
				<img src="../../static/img/login-6.png"/>
				<input type="password" v-model="passwordAgain" placeholder="请再次输入密码" />
			</div>
			<el-select v-model="source" placeholder="您是通过什么渠道了解我们的">
			    <el-option
			        v-for="item in channel"
			        :key="item.value"
			        :label="item.label"
			        :value="item.value">
			    </el-option>
			</el-select>
			<div class="agreement">
				<el-checkbox v-model="agreement">我已仔细阅读并同意接受<router-link to="/agreement">《用户使用协议》</router-link></el-checkbox>
			</div>
			<input id="sub" @click="register" type="button" value="注册" />
			<div class="forget">
				<p>已有账号?<router-link to="/IDoperation/login" >前往登录</router-link></p>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'register',
	data:function(){
		return{
			phone: '',//手机号
			code: '',//验证码
			getVerification: '60s后重新获取',//获取验证码
			keyCode:'',//加密验证码
			invite: '',//邀请码
			password: '',//密码
			passwordAgain: '',//重复密码
			verificationShow: true,//获取验证码切换
			source:'',//来源
			agreement: false,//用户协议
			source: '',//选中的渠道
			channel: [
				{
					value: '通过QQ',
          			label: '通过QQ'
				},
				{
					value: '用户介绍',
          			label: '用户介绍'
				},
				{
					value: '通过微信',
          			label: '通过微信'
				},
				{
					value: '朋友介绍',
          			label: '朋友介绍'
				},
				{
					value: '搜索引擎（百度、360等）',
          			label: '搜索引擎（百度、360等）'
				},
				{
					value: '贴吧论坛',
          			label: '贴吧论坛'
				},
				{
					value: '今日头条',
          			label: '今日头条'
				},
				{
					value: '其他来源',
          			label: '其他来源'
				},
			],
			inviteCheck:true,
		}
	},
	methods:{
		register:function(){
			var _this = this;
			if(!_this.agreement){
				_this.$alert("2","请先同意《用户试用协议》");
				return;
			}
			if(_this.code==''){
				_this.$alert("2","验证码不能为空");
				return;
			}
			if(_this.password=='' || _this.passwordAgain==''){
				_this.$alert("2","密码不能为空");
				return;
			}
			if(_this.password != _this.passwordAgain){
				_this.$alert("2","两次输入密码不一致");
				return;
			}
			if(_this.source==''){
				_this.$alert("2","渠道不能为空");
				return;
			}
			if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(_this.phone)){
				_this.$alert("2","手机号格式错误");
				return;
			}
			let postData = _this.$qs.stringify({
				    phone:_this.phone,
				    code:_this.code,
				    keyCode:_this.keyCode,
				    invite:_this.invite,
				    password:_this.password,
				    source:_this.source,
			});
			_this.$axios.post('/agent/autho/public/signup',postData).then(function(res){
				console.log(res.data.message);
				if(res.data.message=="succ"){
					_this.$alert("1","注册成功！")
					_this.$router.push({path:'/IDoperation/login'});
				}else{
					_this.$alert("2",res.data.result);
					console.log(res.data.result);
				}   
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//--------获取验证码倒计时-------
		countDown:function(){
			var reg=11 && /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
			if(!reg.test(this.phone)){
				this.$alert('3','请输入正确的手机号码');
				return;
			}
			var time = 60;
			var _this = this;
			_this.verificationShow = false;
			_this.getVerification = '60s后重新获取';
			_this.phoneCode();
			var Time = setInterval(function(){
				if(time == 1){
					_this.verificationShow = true;
					time = 60;
					clearTimeout(Time);
				}else{
					time -- ;
					_this.getVerification = time + 's后重新获取';
				}
			},1000);
		},
		phoneCode:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				phone:_this.phone,
			});
			_this.$axios.post('/sms/public/phoneCode',postData).then(function(res){
				if(res.data.message=="succ"){
					_this.keyCode = res.data.result;
					_this.$alert("1","发送成功");
				}else{
					_this.$alert("2","发送失败");
					console.log(res.data.result);
				}   
			}).catch(function (error) {
			    console.log(error);
			});
		},
	},
	created: function(){
		//判断是否有上级
		if(sessionStorage.getItem(`invite`)=="undefined"||sessionStorage.getItem(`invite`)==null){
			//没有显示可填写
			this.inviteCheck = true;
		}else{
			//有直接不给填写，默认内存
			this.invite = sessionStorage.getItem(`invite`)
			this.inviteCheck = false;
		}
	}
}
</script>

<style>
#register .el-select{
	width: 80%!important;
	margin-left: 10%!important;
	margin-top: 20px!important;
}
#register .el-input__inner{
	border-radius: 0!important;
	height: 34px!important;
}
#register .el-input__icon{
	height: auto!important;
	line-height: 34px!important;
}
</style>

<style scoped>
#register{
	padding-top: 20px;
	width: 1000px;
	margin: 0 auto;
	height: calc(100% - 117px);
	min-height: 603px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
#register>img{
	height: 410px;
	display: block;
}
.login_form{
	width: 350px;
	background-color: #fff;
	box-shadow: 0 0 10px #CCCCCC;
	padding-top: 30px;
	padding-bottom: 40px;
}
.login_form h3{
	color: #FF464E;
	font-size: 20px;
	text-align: center;
}
.input input{
	border: none;
	background-color: rgba(0,0,0,0);
	width: 230px;
	height: 100%;
}
.input,.validate{
	width:80%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding-left: 10px;
	margin-top: 20px;
	border: 1px solid #EEEEEE;
	height: 34px;
	box-sizing: border-box;
}
.validate{
	border: none;
	padding-left: 0;
}
.input img,.validate div img{
	height: 20px;
	width: 20px;
	margin-right: 10px;
}
.validate>img{
	height: 100%;
	display: block;
}
.validate div{
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 10px;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.validate{
	justify-content: space-between;
	overflow: hidden;
}
.validate input[type="text"]{
	width: 120px;
	border: none;
	background-color: rgba(0,0,0,0);
	height: 100%;
}
.validate input[type="button"]{
	width: 110px;
	height: 100%;
	border: 1px solid #FF464E;
	color: #FF464E;
	background-color: #FFFFFF;
}
.forget{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-top: 10px;
	color: #9F9F9F;
}
.forget a{
	display: inline-block;
	color: #3ea4ed;
}
.agreement{
	width: 80%;
	margin: 0 auto;
	margin-top: 10px;
}
.agreement .el-checkbox{
	font-size: 12px;
	color: #9F9F9F;
}
.agreement .el-checkbox__label{
	padding-left: 5px;
}
.agreement a{
	color: #3ea4ed;
}
#sub{
	width: 80%;
	display: block;
	margin: 0 auto;
	background-color: #FF464E;
	color: #FFFFFF;
	font-size: 16px;
	height: 36px;
	border: none;
	border-radius: 50px;
	margin-top: 20px;
}
</style>
